<template>
    <div>
        <!-- 纯静态的内联样式 -->
        <!-- <h1 style="color: red;">这是一个标题</h1> -->
        <!-- 动态的内联样式 -->
        <!-- <h1 :style="{ color: fontColor, backgroundColor: '#eee' }">这是一个标题</h1>
        <button @click="fontColor = 'orange'">修改文字颜色</button> -->

        <!-- <h1 :class="{ active: done }">动态class的语法</h1>
        <button @click="done = !done">切换</button> -->


        <h1>这是一个标题</h1>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const fontColor = ref('green');
const done = ref(true);

</script>

<style scoped>
/* @import '../../styles/global.css'; */
/* .active {
    color: red;
    text-decoration: line-through;
} */
h1 {
    color: red;
}
</style>